<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    body {
        text-align: center;
    }

    .select {
        width: 150px;
        float: left;
    }

    input {
        margin-top: 20px;
    }

    button {
        margin-top: 20px;
    }

    .table {
        width: 1200px;
        margin: auto;
    }

    tr,
    th,
    td {
        text-align: center;
    }
</style>

<body>
    <h1>学生成绩考试录入</h1>
    <!-- 三级联动 -->
    <select name="" id="school" class="form-control select" style="margin-left: 750px;">
        <option value="">请选择学校：</option>
    </select>
    <select name="" id="grade" class="form-control select">
        <option value="">请选择年级：</option>
    </select>
    <select name="" id="banji" class="form-control select">
        <option value="">请选择班级：</option>
    </select>
    <br>
    <br>
    <hr>
    <br>
    <!-- 输入姓名和成绩 -->
    姓名：<input type="text" id="name"><br>
    语文：<input type="number" id="yuwen"><br>
    数学：<input type="number" id="shuxue"><br>
    英语：<input type="number" id="yingyu"><br>
    <button id="tianjia">添加</button>
    <hr>
    <!-- 学校名称 -->
    <input type="button" value="北京市朝阳小学" id="chaoyang">
    <input type="button" value="北京市西城小学" id="xicheng">
    <hr>
    <hr>
    <!-- 排序 -->
    <button id="yuwendian">语文</button>
    <button id="shuxuedian">数学</button>
    <button id="yingyudian">英语</button>
    <button id="zongfendian">总分</button>
    <hr>
    <!-- 成绩表格 -->
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>年级-班级</th>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
                <th>平均分</th>
                <th>名次</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    // 朝阳小学
    var lisisList = []
    // 西城小学
    var xichengList = []
    var schools = [
        {
            "name": "北京市朝阳小学",
            "city": [
                {
                    "name": "一年级",
                    "area": ["1班", "2班"]
                },
                {
                    'name': '二年级',
                    'area': ["1班", "2班"]
                }
            ]
        },
        {
            "name": "北京市西城小学",
            "city": [
                {
                    "name": "一年级",
                    "area": ["1班", "2班", '3班', '4班', '5班']
                },
                {
                    'name': '二年级',
                    'area': ["1班", "2班", '3班', '4班', '5班']
                }
            ]
        },
    ]
    $(function () {
        showCar()
        // showCarxicheng()
        var schoolList = '<option value="">请选择学校：</option>'
        for (let i in schools) {
            schoolList += `<option value="${i}">${schools[i].name}</option>`
        }
        $('#school').html(schoolList)
        sanji()


        // $('#yuwendian').click(function () {
        //     $('#nameObj')
        // })
    })
    // 三级联动
    function sanji() {
        $('#school').change(function () {
            let index = $(this).val()
            let schoolAll = schools[index].city
            let schoolEr = '<option value="">请选择年级：</option>'
            for (let i in schoolAll) {
                schoolEr += `<option value="${index}-${i}">${schoolAll[i].name}</option>`
            }
            $('#grade').html(schoolEr)
        })
        $('#grade').change(function () {
            let index = $(this).val()
            let indexAll = index.split('-')
            let area = schools[indexAll[0]].city[indexAll[1]].area
            let schoolListAll = '<option value="">请选择班级：</option>'
            for (let i in area) {
                schoolListAll += `<option value="${index}-${i}">${area[i]}</option>`
            }
            $('#banji').html(schoolListAll)
        })
    }


    // 添加内容
    $('#tianjia').click(function () {
        var name = $('#name').val()
        var yuwen = $('#yuwen').val()
        var shuxue = $('#shuxue').val()
        var yingyu = $('#yingyu').val()
        var zongfen = Number(yuwen) + Number(shuxue) + Number(yingyu)
        var pingjuefen = Math.round((Number(yuwen) + Number(shuxue) + Number(yingyu)) / 3)
        var nianji = $('#grade option:selected').html() + '-' + $('#banji option:selected').html()
        if (name == '' || yuwen == '' || shuxue == '' || yingyu == '') {
            alert('值不能为空')
            return
        }
        var lisis = {

            name: name,
            yuwen: yuwen,
            shuxue: shuxue,
            yingyu: yingyu,
            zongfen: zongfen,
            pingjuefen: pingjuefen,
            nianji: nianji,
        }

        lisisList.push(lisis)
        saveData('lisisList', lisisList)
        showCar()

        xichengList.push(lisis)
        saveData('xichengList', xichengList)
        showCar()
    })
    function showCar() {
        lisisList = localStorage.getItem('lisisList') ? JSON.parse(localStorage.getItem('lisisList')) : []
        var str = ''
        for (let i in lisisList) {
            str += `<tr>
                        <th>${lisisList[i].nianji}</th>
                        <th data-id="${i}" id="nameObj">${lisisList[i].name}</th>
                        <th data-id="${i}">${lisisList[i].yuwen}</th>
                        <th data-id="${i}">${lisisList[i].shuxue}</th>
                        <th data-id="${i}">${lisisList[i].yingyu}</th>
                        <th data-id="${i}">${lisisList[i].zongfen}</th>
                        <th data-id="${i}">${lisisList[i].pingjuefen}</th>
                        <th data-id="${i}">${i}</th>
                    </tr>`
        }
        $('tbody').html(str)
    }
    // function showCarxicheng() {
    //     xichengList = localStorage.getItem('xichengList') ? JSON.parse(localStorage.getItem('xichengList')) : []
    //     var str = ''
    //     for (let i in xichengList) {
    //         str += `<tr>
    //                     <th>${xichengList[i].nianji}</th>
    //                     <th data-id="${i}">${xichengList[i].name}</th>
    //                     <th data-id="${i}">${xichengList[i].yuwen}</th>
    //                     <th data-id="${i}">${xichengList[i].shuxue}</th>
    //                     <th data-id="${i}">${xichengList[i].yingyu}</th>
    //                     <th data-id="${i}">${xichengList[i].zongfen}</th>
    //                     <th data-id="${i}">${xichengList[i].pingjuefen}</th>
    //                     <th data-id="${i}">${i}</th>
    //                 </tr>`
    //     }
    //     $('tbody').html(str)
    // }

    $('#chaoyang').click(function () {
        $('#chaoyang').css({ background: 'red' })
        $('#xicheng').css({ background: 'yellow' })


        saveData('lisisList', lisisList)
        showCar()
    })
    $('#xicheng').click(function () {
        $('#xicheng').css({ background: 'red' })
        // $('#chaoyang').css({ background: 'yellow' })

        // saveData('xichengList', xichengList)
        // showCarxicheng()
    })

    function yuwendian() {
        // $('#nameObj').sorp(function(a,b){
        //     return a-b
        // })
        // var arr = [$('#nameObj').val()]
        var arr1 = arr.fort(function (a, b) {
            return a.yuwen - b.yuwen
        })
    }
    // 本地存储
    function saveData() {
        localStorage.setItem('lisisList', JSON.stringify(lisisList))
    }

</script>

</html>